<template>
  <div :style="bdata.bgimg">
    <div class="banner_grid_content">
      <div class="banner_grid_item_div">
        <h4>{{ bdata.bannertxt.title }}</h4>
        <p>
          {{ bdata.bannertxt.param }}
        </p>
        <div class="banner_grid_item_div_btn">
          <div class="banner_grid_item_btn_right">免费试用</div>
          <div class="banner_grid_item_btn_left">视频介绍</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: ["bdata"],
    data() {
      return {};
    },
    methods: {},
  };

</script>

<style scoped>
  .banner_grid {
    opacity: 0;
  }

  .banner_grid_content {
    margin-top: 10%;
    max-width: 1160px;
    margin-left: auto;
    margin-right: auto;
    
  }
  .banner_grid_item_div{
    padding: 110px 0 0 40px;
  }
  .banner_grid_item_div>h4 {
    font-size: 50px;
    color: #1d2845;
  }

  .banner_grid_item_div>p {
    font-size: 24px;
    color: #6f7b8e;
    padding: 25px 0;
    width: 400px;
    margin-top: 15px;
  }

  .banner_grid_item_div_btn {
    display: flex;
    margin-top: 80px;
    /* margin-top: 10%; */
  }

  .banner_grid_item_btn_right,
  .banner_grid_item_btn_left {
    width: 230px;
    background: #077af1;
    color: #fff;
    font-size: 16px;
    text-align: center;
    outline: 1px solid #077af1;
    border-radius: 4px;
    cursor: pointer;
    padding: 11px 0;
  }

  .banner_grid_item_btn_left {
    background: #fff;
    color: #077af1;
    margin-left: 40px;
  }

</style>
